<template>
  <Header/>
  <main class="container max-w-screen-xl mx-auto p-4">
    <div class="grid grid-cols-4 gap-4">
      <div class="col-span-4 md:col-span-3 animate__animated animate__bounceIn">
        <div v-for="item in archiveList" :key="item.month"
             class="p-5 mb-4 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
          <time class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.month }}</time>
          <ol class="mt-3 divide-y divider-gray-200 dark:divide-gray-700">
            <li @click="gotoArticleDetail(info.id)" v-for="info in item.articles" :key="info.id" class="cursor-pointer">
              <p class="items-center block p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700">
                <img class="w-12 h-12 mb-3 me-3 rounded-full sm:mb-0" :src="info.cover" alt="Jese Leos image"/>
                <div class="text-gray-600 dark:text-gray-400">
                  <div class="text-base font-normal">{{ info.title }}</div>
                  <!-- 发布时间 -->
                  <div class="flex items-center text-xs mt-2">
                    <svg class="inline w-3 h-3 mr-2 text-gray-400 dark:text-white" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2"
                            d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z"/>
                    </svg>
                    {{ moment(info.createTime, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD") }}
                  </div>
                </div>
              </p>
            </li>
          </ol>
        </div>
        <nav class="flex items-center justify-center mt-4" aria-label="Page navigation example">
          <h2 class="mr-4">共{{total}}篇文章</h2>
          <ul class="flex items-center -space-x-px h-10 text-base">
            <li>
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Previous</span>
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 1 1 5l4 4"/>
                </svg>
              </p>
            </li>
            <li v-for="index in pageSize" :key="index" @click="changePage(index)">
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                {{index}}
              </p>
            </li>
            <li>
              <p class="cursor-pointer flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                <span class="sr-only">Next</span>
                <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 6 10">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="m1 9 4-4-4-4"/>
                </svg>
              </p>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-span-4 md:col-span-1 animate__animated animate__bounceIn">
        <user-info/>
        <CategoryInfo/>
        <TagInfo/>
      </div>
    </div>
  </main>
  <ScrollToTopButton/>
  <Footer/>
</template>

<script setup>
import Header from "@/layouts/fronted/components/Header.vue";
import UserInfo from "@/layouts/fronted/components/UserInfo.vue";
import CategoryInfo from "@/layouts/fronted/components/CategoryInfo.vue";
import TagInfo from "@/layouts/fronted/components/TagInfo.vue";
import Footer from "@/layouts/fronted/components/Footer.vue";
import {onMounted, ref} from "vue";
import {pageQueryArchive} from "@/api/frontend/archive.js";
import moment from "moment";
import {useRouter} from "vue-router";
import ScrollToTopButton from "@/components/ScrollToTopButton.vue";

const current = ref(1)
const size = ref(10)
const total = ref(0)
const archiveList = ref([])
const pageSize = ref(0)
const router = useRouter()

onMounted(() => {
  getArchiveList()
})

// 获取 Archive 信息
function getArchiveList() {
  pageQueryArchive(current.value, size.value).then(resp => {
    if (resp.success) {
      archiveList.value = resp.data
      total.value = resp.total
      pageSize.value = resp.pages
    }
  })
}

// 博客详情
const gotoArticleDetail = (id) => {
  router.push("/article/detail/" + id)
}

// 跳转页面
const changePage = (cur) => {
  current.value = cur
  getArchiveList()
}
</script>

<style scoped>
.max-w-sm {
  max-width: 48rem;
}
</style>